<template>
  <div>child</div>
  <div>
    {{ msg }}
  </div>

  <input type="text" name="" id="" v-model="fullName.firstName" /><br />
  <input type="text" name="" id="" v-model="fullName.lastName" />
  <hr />
  <input type="text" name="" id="" v-model="fullName1" />
  <br />
  <input type="text" name="" id="" v-model="fullName2" />
  <br />
  <input type="text" name="" id="" v-model="fullName3" />
</template>
<script>
import {
  computed,
  defineComponent,
  reactive,
  watch,
  ref,
  watchEffect,
} from "vue";

export default defineComponent({
  props: ["msg"],
  setup(props, context) {
    console.log(11111111111);
    console.log(props, context);
    const fullName = reactive({
      firstName: "东方",
      lastName: "不败",
    });
    const fullName1 = computed(() => {
      return fullName.firstName + "-" + fullName.lastName;
    });
    // const change = () => {

    // };
    const fullName2 = computed({
      get() {
        return fullName.firstName + "-" + fullName.lastName;
      },
      set(value) {
        fullName.firstName = value.split("-")[0];
        fullName.lastName = value.split("-")[1];
      },
    });
    const fullName3 = ref("");
    // watch(
    //   fullName,
    //   (value) => {
    //     fullName3.value = value.firstName + "-" + value.lastName;
    //   },
    //   { immediate: true, deep: true }
    // );
    watchEffect(() => {
      fullName3.value = fullName.firstName + "-" + fullName.lastName;
    });
    return {
      fullName,
      fullName1,
      fullName2,
      fullName3,
    };
  },
});
</script>
